<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="topNav">
        <div class="floatRight">
            <div class="topTitle">
                登录
            </div>
            <div class="topTitle">
                注册
            </div>
            <div class="topTitle">
                我的订单
            </div>
            <div class="topTitle">
                帮助中心
            </div>
            <div class="topTitle">
                在线客服
            </div>
            <div class="topTitle">
                手机版
            </div>
        </div>
    </div>
    <div class="middleNav">
        <div class="floatLeft">
            <img src="C:\Users\dante\Pictures\Screenshots\logo.png" class="floatLeft">
        </div>
        <div class="middle">
            <a href="index2.html">
                首页
            </a>
            <a href="book.html">
                图书库
            </a>
            <a href="video2.html">
                教学资料库
            </a>
            <a href="about.html">
                关于我们
            </a>
        </div>
        <div class="floatRight search">
            <input class="midinput" placeholder="请输入关键字">
            <button class="midbutton">搜索</button>
        </div>
    </div>

    <div class="middleSite">
        <div class="leftNav floatLeft">
            <button class="book1 book">
                后端
            </button>
            <button class="book2 book">
                前端
            </button>
            <button class="book3 book">
                考研
            </button>
            <button class="book4 book">
                AI
            </button>
            <button class="book5 book">
                更多方向
            </button>

        </div>
        <div class="banner floatRight">
            <div class="page1 page">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
            </div>
            <div class="page2 page">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
            </div>
            <div class="page3 page">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\3.2.png">
            </div>
            <div class="page4 page">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
                <img  src="C:\Users\dante\Pictures\Screenshots\4.1.png">
            </div>
            <div class="page5 page">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\1.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.2.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.1.png">
                <img src="C:\Users\dante\Pictures\Screenshots\2.2.png">
            </div>
            <div style="    position: absolute;
                            height: 20px;
                            width: 20%;
                            bottom: 2px;
                            right: 2px;
                            line-height: 20px;">
                敬请期待。。。
            </div>

        </div>
    </div>

    <div class="bottom">
        │© 2025 在线学习平台 | 隐私政策 | 使用条款 | 联系我们 │
    </div>
</body>

<script>
    var buttonDom1 = document.querySelector(".book1");
    var buttonDom2 = document.querySelector(".book2");
    var buttonDom3 = document.querySelector(".book3");
    var buttonDom4 = document.querySelector(".book4");
    var buttonDom5 = document.querySelector(".book5");
    var pageDom1 = document.querySelector(".page1");
    var pageDom2 = document.querySelector(".page2");
    var pageDom3 = document.querySelector(".page3");
    var pageDom4 = document.querySelector(".page4");
    var pageDom5 = document.querySelector(".page5");
    pageDom2.style.display = 'none';
    pageDom3.style.display = 'none';
    pageDom4.style.display = 'none';
    pageDom5.style.display = 'none';
    buttonDom1.onclick = function(){
        pageDom1.style.display = 'grid';
        pageDom2.style.display = 'none';
        pageDom3.style.display = 'none';
        pageDom4.style.display = 'none';
        pageDom5.style.display = 'none';
    }
    buttonDom2.onclick = function(){
        pageDom1.style.display = 'none';
        pageDom2.style.display = 'grid';
        pageDom3.style.display = 'none';
        pageDom4.style.display = 'none';
        pageDom5.style.display = 'none';
    }
    buttonDom3.onclick = function(){
        pageDom1.style.display = 'none';
        pageDom2.style.display = 'none';
        pageDom3.style.display = 'grid';
        pageDom4.style.display = 'none';
        pageDom5.style.display = 'none';
    }
    buttonDom4.onclick = function(){
        pageDom1.style.display = 'none';
        pageDom2.style.display = 'none';
        pageDom3.style.display = 'none';
        pageDom4.style.display = 'grid';
        pageDom5.style.display = 'none';
    }
    buttonDom5.onclick = function(){
        pageDom1.style.display = 'none';
        pageDom2.style.display = 'none';
        pageDom3.style.display = 'none';
        pageDom4.style.display = 'none';
        pageDom5.style.display = 'grid';
    }
</script>


<style>
    @import url("topNav.css");
    @import url("common.css");
    @import url("middleNav.css");
    @import url("middleSite.css");
    @import url("bottom.css");

    * {
        box-sizing: border-box;
    }
</style>

</html>